<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <el-form
        size="small"
        style="margin-bottom: 10px"
        ref="form"
        label-width="80px"
        :inline="true"
      >
        <el-form-item size="small" label="">
          <el-input v-model="username"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="searchUser"
            type="primary"
            icon="el-icon-search"
            size="small"
            >查询</el-button
          >
          <el-button @click="Clear" size="small">清空</el-button>
        </el-form-item>
      </el-form>
      <div style="margin-bottom: 20px">
        <el-button
         type="primary"
          size="small"
         @click="addUser"
         v-btnPower="'btn.User.add'"
          >添 加</el-button
        >
        <el-button
          type="danger"
          :disabled="tableSelect.length == 0"
          size="small"
          @click="batchDelete"
          v-btnPower="'btn.User.remove'"
          >批量删除</el-button
        >
      </div>
      <el-table
        style="margin-bottom: 10px"
        v-loading="loading"
        :data="userList"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="序号" width="80" type="index" align="center">
        </el-table-column>
        <el-table-column label="用户名" prop="username"> </el-table-column>
        <el-table-column label="用户名称" prop="nickName"> </el-table-column>
        <el-table-column label="角色列表" prop="roleName"> </el-table-column>
        <el-table-column label="创建时间" prop="gmtCreate"> </el-table-column>
        <el-table-column label="更新时间" prop="gmtModified"> </el-table-column>
        <el-table-column label="操作" width="200" #default="{ row }">
          <el-button
            size="mini"
            type="info"
            icon="el-icon-user-solid"
            @click="setUser(row)"
            v-btnPower="'btn.User.assgin'"
          ></el-button>
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            @click="editUser(row)"
            v-btnPower="'btn.User.update'"
          ></el-button>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            v-btnPower="'btn.User.remove'"
            @click="deleteUser(row)"
          ></el-button>
        </el-table-column>
      </el-table>

      <el-pagination
        @current-change="setCurrent"
        @size-change="setSize"
        :page-sizes="[5, 6, 9]"
        :page-size="pagesize"
        layout="prev, pager, next, jumper,->,sizes,total"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <Model ref="modal"></Model>
    <UserModel ref="userModel"></UserModel>
  </div>
</template>

<script>
import prjectApi from "@/api/project";
import { Message } from "element-ui";
import Model from "./compoents/model.vue";
import UserModel from "./compoents/UserModel.vue";
export default {
  name: "User",
  data() {
    return {
      // 用户数据
      userList: [],
      // 当前页
      current: 1,
      //每页条数
      pagesize: 5,
      username: "",
      loading: false,
      total: 0,
      tableSelect: [],
    };
  },
  methods: {
    // 获取user数据渲染
    async reqUserList(username = "") {
      this.loading = true;
      try {
        let { current, pagesize } = this;
        let { data } = await prjectApi.reqUserList(current, pagesize, username);
        this.userList = data.items;
        this.total = data.total;
      } catch (error) {
      } finally {
        this.loading = false;
      }
    },
    //添加用户信息
    addUser() {
      this.$refs.modal.dialogFormVisible = true;
    },
    // 删除信息
    async deleteUser(item) {
      try {
        await prjectApi.deleteUser(item.id);
        Message.success("删除成功");
        this.reqUserList(this.username);
      } catch (error) {
        Message.error(error);
      }
    },
    // 查找信息
    async searchUser() {
      this.reqUserList(this.username);
    },
    Clear() {
      this.username = "";
      this.reqUserList();
    },
    // 修改用户信息
    editUser(item) {
      this.$refs.modal.formData = { ...item };
      this.$refs.modal.dialogFormVisible = true;
    },
    // 修改当前页
    setCurrent(current) {
      this.current = current;
    },
    setSize(pagesize) {
      this.pagesize = pagesize;
    },
    setUser(item) {
      this.$refs.userModel.assign = item;
      this.$refs.userModel.dialogFormVisible = true;
    },
    // 确认批量删除
    async BatchDELETE() {
      try {
        await Promise.all(
          this.tableSelect.map(async (item) => {
            try {
              await prjectApi.deleteUser(item.id);
            } catch (error) {}
          })
        );
        Message.success("删除成功")
        this.reqUserList()
      } catch (error) {}
    },
    // 批量删除
    async batchDelete() {
      try {
        await this.$alert("确定删除吗", "警告", {
          confirmButtonText: "确定",
          showCancelButton:"取消"
        });
        this.BatchDELETE()
      } catch (error) {}
    },
    // table选择框
    handleSelectionChange(val) {
      this.tableSelect = [...val];
    },
  },

  mounted() {
    this.reqUserList();
    this.$bus.$on("reqUserList", this.reqUserList);
  },
  components: {
    Model,
    UserModel,
  },
  computed: {
    // 监听current和pagesize
    czChange() {
      let { current, pagesize } = this;
      return {
        current,
        pagesize,
      };
    },
  },
  watch: {
    // 监听current和pagesize
    czChange() {
      this.reqUserList();
    },
  },
};
</script>

<style scoped></style>
